<template>
  <div class="dashboard-container">

    <el-card v-loading="fullscreenLoading">
      <div class="search-list-box">
        <el-input class="name" v-model="phone" placeholder="请输入下单手机号"></el-input>
        <div class="date-picker">
          <el-date-picker value-format="yyyy-MM-dd" v-model="day" align="right" type="date" placeholder="选择日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </div>
        <el-button type="primary" plain @click="searchList">查询</el-button>
      </div>
      <el-table :data="data.list" border style="width: 100%">
        <el-table-column label="预约营地" width="180">
          <template slot-scope="scope">{{ scope.row.camp.groupCode_txt }} - {{ scope.row.camp.title }}</template>
        </el-table-column>
        <el-table-column label="预约人数" width="80">
          <template slot-scope="scope">{{ scope.row.peopleNum.$numberInt }}人</template>
        </el-table-column>
        <el-table-column label="预约时间" prop="bookingDate" align="center">
          <template slot-scope="scope">
            <span class="yy-day" v-for="(item, index) in scope.row.bookingDate">{{ item }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="creatTime" label="下单时间" width="180">
          <template slot-scope="scope">{{ parseTime(scope.row.creatTime.$numberLong) }}</template>
        </el-table-column>
        <el-table-column prop="avatarUrl" label="头像" width="60">
          <template slot-scope="scope">
            <el-image :src="scope.row.avatarUrl" v-if="scope.row.avatarUrl"></el-image>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column prop="nickName" label="昵称" width="180">
          <template slot-scope="scope">
            {{ scope.row.nickName || '无' }}
          </template>
        </el-table-column>
        <el-table-column prop="openid" label="用户手机号">
          <template slot-scope="scope">
            {{ scope.row.phone || '无' }}
          </template>
        </el-table-column>
        <el-table-column prop="openid" label="状态">
          <template slot-scope="scope">
            {{ scope.row.status == 1 ? '已预约' : '已取消' }}
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="130">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="cancelOrder(scope.row)" v-if="scope.row.status == 1">取消预约</el-button>
            </template>
        </el-table-column>
      </el-table>
      <pagination :data="data" @currentChange="currentChange"></pagination>
    </el-card>
  </div>
</template>
  
<script>
import { parseTime } from '@/utils/index';
import request from '@/utils/request';
import { remove } from 'js-cookie';
export default {
  data() {
    this.parseTime = (d) => parseTime(d)
    return {
      postFileUlr: process.env.VUE_APP_BASE_API + '/upload-file',
      list: [],
      direction: 'rtl',
      drawer: false,
      currentRow: false,
      data: '',
      phone: '',
      day: '',
      pickerOptions: {},
      searchDay: '',
      fullscreenLoading: true,
    }
  },
  mounted() {
    let {day} = this.$route.query
    if (day) {
      this.searchDay = day;
      this.day = day;
    }
    this.getList();
  },
  methods: {
    cancelOrder(row) {
      this.$confirm(`确定取消手机尾号${row.phone.substring(7,11)}的预约?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
        request.get('/reservation-cancel', {
          params: {
            id: row._id,
            campId: row.camp._id,
          },
        }).then((res)=> {
          this.getList();
        })
          
      })
      
    },
    searchList() {
      this.fullscreenLoading = true;
      if (this.day) {
        let day = JSON.parse(JSON.stringify(this.day)).split('-');
        this.searchDay = day.join('/');
      }
      this.getList()
    },
    currentChange(e) {
      this.getList(e)
    },
    getList(num) {
      request.get('/reservation-list', {
        params: {
          pageNum: num || 1,
          phone: this.phone || '',
          searchDay: this.day ? this.searchDay : '',
        },
      }).then((res) => {
        this.data = res.data;
        this.fullscreenLoading = false;
      })
    },
  },
}
</script>
<style lang="scss">
.del-img {
  cursor: pointer;
  position: absolute;
  right: 5px;
  top: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: red;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-img {
  width: 100px;
  height: 100px;

  .el-image__preview {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
}

.swiper-upload {
  width: 100px;
  height: 100px;

  .el-upload--picture-card {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.swiper-content {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;

  .swiper-img {
    position: relative;
    border-radius: 8px;
    width: 100px;
    height: 100px;
    background-position: center center;
    background-size: cover;
    margin-right: 8px;
    margin-bottom: 8px;
  }
}

.w-drawer {
  .el-drawer__body {
    overflow-y: scroll;
  }
}
</style>
<style lang="scss"  scoped>
.w-card {
  padding: 20px;
}

.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.list-menu {
  margin-bottom: 40px;
}

.drawer-bottom {
  display: block;
  margin: auto;
  // position: absolute;
  // bottom: 20px;
  // left: 50%;
  // transform: translateX(-50%);
}

.poster-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-size: cover;
  background-position: center center;
  height: 100%;
  border-radius: 8px;
}

.upload-demo {
  width: 148px;
  position: relative;
  // width: 300px;
  // height: 150px;
}

.yy-day {
  padding: 5px;
}</style>